<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Highcharts Example</title>

	<style type="text/css">d
		#container {
			height: 90vh;
			margin: 0 auto;
		}
	</style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>

<div id="container"></div>


<script type="text/javascript">

	$().ready(function () {

		var categories = ['0-4', '5-9', '10-14', '15-19',
			'20-24', '25-29', '30-34', '35-39', '40-44',
			'45-49', '50-54', '55-59', '60-64', '65-69',
			'70-74', '75-79', '80-84', '85-89', '90-94',
			'95-99', '100 + '];

		//数据初始化
		var chart;
       joy.postJSON("/html/ps/psquery/findPerByYear.ht", {
           jhlx: jhlx,
           rclx: rclx,
           pclx: pclx,
           bfsj: bfsj
       }, function (resultObject) {
           var listX = resultObject.returnX;//resultObject.returnX; //x类型 年度
           var list1 = resultObject.return1;//resultObject.returnY; //计划类型一
           var list2 = resultObject.return2;//resultObject.returnZ; //计划类型二
           var list3 = resultObject.return3;//resultObject.returnY; //计划类型三
           var list4 = resultObject.return4;//resultObject.returnZ; //计划类型四

//            var result=split_array(resultObject,resultObject.length/2);
           test(listX, list1, list2,list3, list4, title, totle);
       });


		test();

		function test() {
			chart = Highcharts.chart('container', {
				chart: {
					type: 'bar'
				},
				title: {
					text: '厦门市高层次人才性别-年龄金字塔'
				},
               subtitle: {
                   useHTML: true,
                   text: '数据来源: <a href="http://populationpyramid.net/germany/2015/">1950 ~ 2100 年世界人口金字塔</a>'
               },
				xAxis: [{
					categories: categories,
					reversed: false,
					labels: {
						step: 1
					}
				}, { // mirror axis on right side
					opposite: true,
					reversed: false,
					categories: categories,
					linkedTo: 0,
					labels: {
						step: 1
					}
				}],
				yAxis: {
					title: {
						text: null
					},
					labels: {
						formatter: function () {
							return (Math.abs(this.value) / 1000000) + 'M';
						}
					},
					min: -4000000,
					max: 4000000
				},
				plotOptions: {
					series: {
						stacking: 'normal'
					}
				},
				tooltip: {
					formatter: function () {
						return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
								'人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
					}
				},
				series: [{
					name: '男',
					data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
						-2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
						-2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
				}, {
					name: '女',
					data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
						3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
						1447162, 1005011, 330870, 130632, 21208]
				}]


			});
		}
	})


</script>
</body>
</html>
